.butterbar {
  position: absolute;
  height: 3px;
  margin-bottom: -3px;
  width: 100%;
  z-index: 1000;
  will-change: transform;
  .bar {
    position: absolute;
    width: 100%;
    height: 0;
    text-indent: -9999px;
    background-color: #23b7e5;

    &::before {
      position: absolute;
      height: 3px;
      background-color: inherit;
      content: '';
      left: 0;
      right: 0;
      width: 100%;
    }
  }
  &.active {
    animation: changebar 2.25s infinite 0.75s;
    & > span {
      display: inherit;
    }
    .bar {
      animation: changebar 2.25s infinite;

      &::before {
        animation: movingbar 0.75s infinite;
      }
    }
  }
}
@keyframes changebar {
  0% {
    background-color: #23b7e5;
  }
  33.3% {
    background-color: #23b7e5;
  }
  33.33% {
    background-color: #fad733;
  }
  66.6% {
    background-color: #fad733;
  }
  66.66% {
    background-color: #7266ba;
  }
  99.9% {
    background-color: #7266ba;
  }
}
@keyframes movingbar {
  0% {
    transform: scaleX(0);
  }
  99.9% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
